<script setup>
const props = defineProps({
    favorited: Boolean,
    actionText: String,
    disabled: Boolean,
    hiddenShare: Boolean,
})

const getTextByStatus = () => {
    const text = props.actionText || "收藏"
    return props.favorited ? ("已" + text) : text
}
</script>

<template>
    <SvgTextButton class="favorite-share-btn" :text="getTextByStatus()" :disabled="disabled">
        <template #left-img>
            <svg v-show="!favorited" width="18" height="18" viewBox="0 0 1024 937.46" xmlns="http://www.w3.org/2000/svg">
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Layer_1-2" data-name="Layer 1">
                        <path
                            d="M1024,299.77c-.89,7.24-1.74,14.5-2.67,21.74-5.4,41.95-19.53,81-39,118.35-24.74,47.39-56.62,89.8-91.22,130.27-48.69,57-101.85,109.6-156.46,160.77C661.69,799.26,588.19,867,514.93,935.05c-.85.78-1.75,1.49-2.85,2.41-1.09-.89-2.14-1.65-3.09-2.52q-101.8-92.36-203.56-184.77c-58.71-53.61-116.12-108.59-168.2-168.81-39.12-45.23-74.7-92.93-100.8-147.1-18.8-39-31.17-79.91-35.23-123.16-.32-3.45-.8-6.89-1.2-10.33v-36c1-7.74,1.79-15.5,2.86-23.23,8.06-57.93,30.88-109.28,71.21-151.7,67.09-70.55,150.24-98.35,246.11-86,75.62,9.71,138.64,44.83,189.43,101.75.74.82,1.61,1.52,2.53,2.39.91-1,1.61-1.66,2.26-2.4a297.6,297.6,0,0,1,98.07-74.34C690-5.4,769.66-11.19,849.33,21.27,948,61.45,1004.25,136.62,1021.1,241.55c1.24,7.69,1.95,15.47,2.9,23.21ZM922.22,282.9c-1.08-10.76-1.48-21.64-3.33-32.27-10-57.28-39.78-101.12-91.95-127.45-54.58-27.54-110.52-27-165.67-1.07-44.78,21.07-78.08,53.89-96.65,100.47-1.2,3-2.93,3.41-5.65,3.4-29.5-.06-59-.1-88.49.05-3.58,0-5.17-1.2-6.63-4.39C430.29,148.12,342.54,89.86,249.42,105.81c-41,7-76.09,25.21-103.36,56.83-38.87,45.08-49.77,97.9-40.53,155.58,5.72,35.66,20,68.21,38.16,99.15C171,463.93,205.43,505,242,544.39c57.44,61.87,119.67,118.78,182.1,175.48,28,25.43,56.23,50.62,84.27,76,5.68,5.15,6.89,5.4,12.43.28C568,752.47,615.47,709.05,662.35,665c54.55-51.26,108-103.64,156.07-161.17C846.69,470,872.66,434.6,892.47,395,910.12,359.76,921.42,322.79,922.22,282.9Z" />
                    </g>
                </g>
            </svg>
            <svg v-show="favorited" width="18" height="18" viewBox="0 0 1024 937.53" xmlns="http://www.w3.org/2000/svg">
                <g id="Layer_2" data-name="Layer 2">
                    <g id="Layer_1-2" data-name="Layer 1">
                        <path
                            d="M1024,264.78v35c-.41,3.45-.89,6.89-1.23,10.34-3.89,39.7-15.25,77.26-32.22,113.22-23.28,49.33-54.76,93.24-89.46,135-49.41,59.44-104,113.93-160.28,166.77-74.94,70.39-150.55,140-225.89,210-.93.87-2,1.58-3.1,2.42-1.47-1.32-2.72-2.41-3.93-3.54-20.27-18.82-40.33-37.87-60.84-56.43C396.63,832,345.74,786.88,295.54,741c-52.69-48.1-103.88-97.76-151.07-151.36-37.41-42.48-71.92-87-98.75-137.15C23.93,411.83,8.38,369.06,2.64,323,1.71,315.62.88,308.2,0,300.79v-36c1-7.74,1.79-15.51,2.86-23.24,8.06-57.92,30.88-109.28,71.21-151.7C141.16,19.28,224.31-8.52,320.18,3.78c75.62,9.71,138.64,44.83,189.43,101.76.74.82,1.61,1.52,2.53,2.39.91-1,1.61-1.66,2.26-2.4a297.49,297.49,0,0,1,98.07-74.35C690-5.4,769.66-11.19,849.33,21.27,948,61.46,1004.25,136.63,1021.1,241.57,1022.34,249.26,1023.05,257,1024,264.78Z" />
                    </g>
                </g>
            </svg>
        </template>
        <template #right-img>
            <svg width="17" height="17" v-show="!hiddenShare" class="share-btn" viewBox="0 0 853.52 938.68" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M292,589.72c-38.76,37.29-85,54.64-138.74,49.42-43.36-4.22-80.19-22.9-109.23-55.42-60.07-67.26-58.33-167.48,3-232,63.16-66.46,174-73.4,245.1-2.51,12.53-7.29,25.17-14.61,37.78-22Q421.83,273.6,513.73,220c3.34-1.94,4.53-3.49,3.48-7.69C493.68,118.28,552.84,23.71,647.54,3.71S834.26,46.49,850.82,142.26C866.66,233.93,805,322.49,713.47,338.48,656.72,348.39,607,333,564.72,294c-2.51-2.33-4.15-2.65-7.2-.86Q448.26,357,338.82,420.7c-2.94,1.72-3.79,3.23-2.91,6.65a166.71,166.71,0,0,1,.06,84c-.93,3.64,0,5.23,3.11,7Q447.89,581.59,556.54,645.1c3.84,2.25,5.9,2,9.21-1,39.77-36.53,86.66-52.18,140.18-44.74,75.89,10.54,133.26,67.55,145.47,142.95,14.17,87.54-44.28,173.15-131.3,192.3C629.41,954.52,540.41,900,517.31,810.27a167.2,167.2,0,0,1,.09-84.5c.77-3,.51-4.67-2.43-6.37Q404.65,655.29,294.42,591C293.7,590.58,293,590.22,292,589.72ZM85.41,469.18a85.23,85.23,0,1,0,85.25-84.95A85,85,0,0,0,85.41,469.18ZM767.87,170.91a85.23,85.23,0,1,0-170.45-.24c-.06,47.21,38.29,85.64,85.35,85.53A85.35,85.35,0,0,0,767.87,170.91Zm-170.45,597a85.23,85.23,0,1,0,170.45.48c.1-47.29-38.06-85.74-85.24-85.61C633.7,682.89,597.2,723.1,597.42,767.89Z"/></g></g></svg>
        </template>
    </SvgTextButton>
</template>

<style>
.favorite-share-btn .left-btn {
    min-width: 118px;
    /*justify-content: flex-start !important;*/
}

.favorite-share-btn .share-btn {
    transform: scale(0.95);
    margin-right: 1px;
}
</style>